// vuex插件中导入createStore函数
import { createStore } from "vuex";

// 配置vuex的公共数据、公共函数等模块选项
// 配置vuex的5个核心概念
const store = createStore({
    // 存储公共数据的对象，类似于vue里的data
    state:{
        // 人员信息数组
        plist:[],

        // 保存注册信息的数组(先注册，后登录新账号)
        user :[],
    },

    // 共同点：mutations和actions存储操作函数
    // 区别：mutations存储的同步函数（函数一个个按排序执行），只有此处的函数才能直接修改state存储的数据
    // 所有同步函数都必须设置第一个参数state：其他参数可选
    mutations:{
        // 添加数据的函数：state公共数据，obj组件提交过来的数据
        addlist(state,objF){
            // 将数据提交给state里面的plist完成添加操作
            // JSON.parse(JSON.stringify(对象))
            // 添加之前，现将本次添加的数据独立一个地址，然后再添加
            state.plist.push(JSON.parse(JSON.stringify(objF)));
            console.log(state,objF);     
                  
        },
        // 删除state的数据
        dellist(state,i){
            let bool = confirm('是否确认删除当前数据？');
            if (bool) {
                state.plist.splice(i,1);
                alert('删除成功');
            }else{
                alert('已取消操作');
            }
        },

        // 替换新数据  datas参数：包括表单的数据和下标
        editlist(state,datas){
            console.log(datas);
            let bool = confirm('是否确认修改当前数据？');
            if (bool) {
                state.plist.splice(Number(datas.id),1,(datas.val));
                alert('修改成功');
            } 
        },
        adduser(state,objU){
            state.user.push(JSON.parse(JSON.stringify(objU)));
            console.log(state,objU);     
                  
        }
    },

    // 区别：actions存储的异步函数（同时执行多个函数），不具备修改state对象的数据，只能作为通用mutations函数的接口
    actions:{
        addMutation(commit,obj){
            console.log(commit,obj);
            
        }
    },

    // 存储对state的数据加工，类似于computed计算属性（如state存储了时间戳，gatter加工成日期格式数据）
    // 不影响原来数据，只是在显示的时候进行优化
    getters:{},

    // 模块，一般用于大型项目的功能划分。登录/注册/忘记密码等于用户信息相关的数据划分一个user模块
    // 每一个独立的模块下，可以重新设置个核心概念
    modules:{},

})

// 导出
export default store;